<template>
  <div id="home">
    <Navbar>
      <!-- <template v-slot:left></template> -->
      <template v-slot:center>图书兄弟</template>
    </Navbar>
    <HomeSwiper style="margin-top: 45px" :banners="banners"></HomeSwiper>
    <RecommendView :recommends="recommends"></RecommendView>
    <TabControl
      :tabTitle="['畅销', '新书', '精选']"
      @tabClick="tabClick"
    ></TabControl>
    <GoodsList :goods="showGoods"></GoodsList>
  </div>
</template>

<script>
import Navbar from "@/components/common/navbar/NavBar.vue";
import RecommendView from "./ChildComps/RecommendView.vue";
import TabControl from "@/components/content/tabControl/TabControl.vue";
import GoodsList from "@/components/content/goods/GoodsList.vue";
import HomeSwiper from "./ChildComps/HomeSwiper.vue";
import { getHomeAllData, getHomeGoods } from "@/network/home";
import { onMounted, reactive, ref, computed } from "vue";

export default {
  name: "Home",
  setup() {
    // 定义轮播图的图片数据
    const banners = ref([]);

    // 声明一个响应式数据
    const recommends = ref([]);

    // 定义商品列表数据模型
    const goods = reactive({
      sales: { page: 0, list: [] },
      new: { page: 0, list: [] },
      recommend: { page: 0, list: [] },
    });

    // 定义一个当前类型 获取当前tabControl选中的标签
    let currentType = ref("sales");
    // 通过计算属性方法只需要把当前tab下的数据返回
    const showGoods = computed(() => {
      return goods[currentType.value].list;
    });

    onMounted(() => {
      getHomeAllData().then((res) => {
        recommends.value = res.data.goods.data;
        banners.value = res.data.slides;
      });
    });

    getHomeGoods("sales").then((res) => {
      goods.sales.list = res.data.goods.data;
    });

    getHomeGoods("new").then((res) => {
      goods.new.list = res.data.goods.data;
    });

    getHomeGoods("recommend").then((res) => {
      goods.recommend.list = res.data.goods.data;
    });

    const tabClick = (index) => {
      let types = ["sales", "new", "recommend"];
      currentType.value = types[index];
    };

    return {
      recommends,
      tabClick,
      goods,
      showGoods,
      banners,
    };
  },

  components: {
    Navbar,
    RecommendView,
    TabControl,
    TabControl,
    TabControl,
    GoodsList,
    HomeSwiper,
  },
};
</script>

<style lang='less'>
.banners {
  width: 100%;
  height: auto;
  margin-top: 10px;
  img {
    width: 375px;
  }
}

#home {
  height: 100vh;
  position: relative;
}

.wrapper {
  position: absolute;
  top: 45px;
  bottom: 50px;
  left: 0px;
  right: 0px;
  overflow: hidden;
  background: rd;
}
</style>